<template>
  <div class="head">
    <div class="right">
      <h3>私域工作室 跟老外学英语</h3>
      <p style="width: 1200px"></p>
      <p>
        <router-link to="/Contact">我们</router-link>
      </p>
      <p class="horizontal" v-if="cookie">
        <router-link class="horizontal-link" to="/My"
          ><h4>我的</h4></router-link
        >
      </p>
      <p class="horizontal" v-else>
        <router-link class="horizontal-link" to="/Regist"
          ><h4>注册</h4></router-link
        >
        <router-link class="horizontal-link" to="/Login"
          ><h4>登陆</h4></router-link
        >
      </p>
    </div>
  </div>
</template>
<script>
import Cookies from "js-cookie";
import { getUserByToken } from "@/api/user";
import store from "store";
export default {
  data() {
    return {
      cookie: "",
    };
  },
  methods: {
    async getCookie() {
      this.cookie = Cookies.get("expire");
      //console.log("===>", this.cookie);
      //console.log("cookie为空", this.cooke === undefined);

      const cookie = {
        token: this.cookie,
      };
      //console.log(cookie);
      const response = await getUserByToken(cookie);
      if (response.code === 0) {
        //console.log("store===>", response.code);
        //commit("SET_USER_INFO", response.data);
        store.set("SET_USER_INFO", response.data);
      } else {
        Cookies.remove("expire");
        // this.$message({
        //   showClose: true,
        //   message: "请您登陆",
        //   type: "warning",
        // });

        // router.push("/");
      }
    },
  },
  created() {
    // this.getCookie();
  },
  mounted() {
    this.getCookie();
  },
  props: {
    cooke: {
      type: String, // 如果是通过props传递的话
    },
  },
};
</script>
<style scoped>
.head {
  background-color: rgb(243, 220, 220);
  height: 50px;
  text-align: center;
}
.right {
  margin-left: 170px;
  display: flex;
}

.horizontal-link {
  display: inline-block;
  margin-right: 2px; /* 可选，为了在链接之间添加间隔 */
}
.horizontal {
  display: inline-block;
  margin-block: -5px;
  margin-left: 20px;
}
</style>
